<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<cms:ads   code="'img_yswtl0',
'ZY_ZhangShaShiXiongJiuJiu_1',
'ZY_WangZhanShouYe_2',
'ZY_ChanPinZhanShi_3',
'ZY_GuanYuWoMen_4',
'ZY_QiYeWenHua_5',
'ZY_XinWenZhongXin_6',
'ZY_LianXiWoMen_7',
'img_zcwjl8',
'ZY_RangRenMenShengHuoGeng_9',
'img_MI9C410',
'ZY_RangRenMenShengHuoGeng_11',
'ZY_ZhangShaShiXiongJiuJiu_12',
'img_yKTLn13',
'ZY_GuanYuWoMen_14',
'bout_15',
'img_Lckme16',
'ZY_ChanPinZhanShi_17',
'roduc_18',
'img_torVX19',
'ZY_HuangMaoKeLi_20',
'img_BG9yE21',
'ZY_HuangMaoKeLi_22',
'img_VxVl923',
'ZY_HuangMaoKeLi_24',
'img_NpalX25',
'ZY_CanLuBuPian_26',
'ZY_XinWenZhongXin_27',
'ews_28',
'img_nXkr429',
'ZY_ZhangShaShiXiongJiuJiu_30',
'ZY_31_31',
'ZY_ZhangShaShiXiongJiuJiu_32',
'img_iSWgw33',
'ZY_ZhangShaShiXiongJiuJiu_34',
'ZY_35_35',
'ZY_ZhangShaShiXiongJiuJiu_36'
"  ></cms:ads>
<!doctype html>
<html>
 <head>
  <title>${网页标题}</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" href="http://hwfile.jyymatrix.cc/jhzht/pc/css/swiper.min.css">
  <link rel="stylesheet" href="http://hwfile.jyymatrix.cc/jhzht/pc/css/animate.css">
  <link rel="stylesheet" href="http://hwfile.jyymatrix.cc/jhzht/pc/css/common.css">
  <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]--> 
  <style>.swiper-button-next, .swiper-button-prev{ width: 32px; height: 32px; margin-top: -16px; } .swiper-button-next{ background-image: url('http://hwfile.jyymatrix.cc/jhzht/pc/images/next.png'); background-size: contain; right: 0; } .swiper-button-prev{ background-image: url('http://hwfile.jyymatrix.cc/jhzht/pc/images/prev.png'); background-size: contain; left: 0; } .swiper-pagination-bullet{ background: #ffffff; } .box{ padding: 60px 0 0; } .about-us .subtitle{ letter-spacing: 2px; } .about-us .article{ text-align: center; font-size: 18px; line-height: 34px; margin-bottom: 40px; } .about-us .right{ width: 320px; flex: 0 0 320px; background: #F5F5F5; } .about-us .arrow{ margin-left: -70px; } .product .swiper-slide{ background: #F5F5F5; height: 400px; position: relative; padding: 20px; box-sizing: border-box; } .product img{ max-width: 75%; max-height: 100%; } .product .desc{ display: none; position: absolute; bottom: 0; left: 0; right: 0; height: 70px; padding: 0 10px; background: #B49575; color: #ffffff; font-size: 18px; text-align: center; line-height: 24px; } .news .news-list{ margin-left: -40px; margin-right: -40px; margin-bottom: 60px; overflow: hidden; } .news .item{ float: left; width: 50%; padding: 0 40px; box-sizing: border-box; } .news .item img{ width: 100%; display: block; height: 250px; } .news .item .con{ background: #f5f5f5; padding: 18px 15px 25px; } .news .item .con .name{ font-size: 18px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .news .item .con .time{ width: 100px; flex: 0 0 100px; font-size: 14px; text-align: right; color: rgb(11 12 12 / 60%); } .news .item .con .desc{ margin-top: 10px; font-size: 15px; color: rgb(11 12 12 / 60%); line-height: 24px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp:2; overflow: hidden; text-align: justify; }</style>
  <meta name="keywords" content="${网页关键词}">
  <meta name="description" content="${网页描述 }">
 </head> 
 <body> 
   <jsp:include page="_top.jsp"></jsp:include>
  <div class="banner">
   <div class="swiper-container"> 
    <div class="swiper-wrapper"> 
     <div class="swiper-slide"> 
      <img src="${img_zcwjl8.adImg}" class="img zy" data-type="ad" data-id="${img_zcwjl8.adId}"> 
      <div class="txt animate__animated animate__fadeInUp zy" data-type="ad" data-id="${ZY_RangRenMenShengHuoGeng_9.adId}">
       ${ZY_RangRenMenShengHuoGeng_9.adTitle}
      </div> 
     </div> 
     <div class="swiper-slide"> 
      <img src="${img_MI9C410.adImg}" class="img zy" data-type="ad" data-id="${img_MI9C410.adId}"> 
      <div class="txt animate__animated animate__fadeInUp zy" data-type="ad" data-id="${ZY_RangRenMenShengHuoGeng_11.adId}">
       ${ZY_RangRenMenShengHuoGeng_11.adTitle}
      </div> 
     </div> 
    </div> 
    <div class="swiper-button-next"></div> 
    <div class="swiper-button-prev"></div> 
    <div class="swiper-pagination"></div> 
   </div> 
  </div> 
  <div class="about-us box"> 
   <div class="container"> 
    <p class="article animate__animated animate__fadeInDown zy" data-type="ad" data-id="${ZY_ZhangShaShiXiongJiuJiu_12.adId}">${ZY_ZhangShaShiXiongJiuJiu_12.adTitle}</p> 
    <div class="flex"> 
     <img src="${img_yKTLn13.adImg}" class="flex-1 animate__animated animate__fadeInLeft zy" data-type="ad" data-id="${img_yKTLn13.adId}"> 
     <div class="right flex flex-column align-center space-center animate__animated animate__fadeInRight"> 
      <h3 class="title animate__animated animate__fadeInUp zy" data-type="ad" data-id="${ZY_GuanYuWoMen_14.adId}">${ZY_GuanYuWoMen_14.adTitle}</h3> 
      <h3 class="subtitle animate__animated animate__fadeInUp zy" data-type="ad" data-id="${bout_15.adId}">${bout_15.adTitle}</h3> 
      <a href="${path }/do/redirect/pc/contactUs" class="arrow animate__animated animate__fadeInUp zy" ><img src="${img_Lckme16.adImg}" data-type="ad" data-id="${img_Lckme16.adId}"> </a>
     </div> 
    </div> 
   </div> 
  </div> 
  <div class="box product"> 
   <div class="container"> 
    <h3 class="title animate__animated animate__fadeInUp zy" data-type="ad" data-id="${ZY_ChanPinZhanShi_17.adId}">${ZY_ChanPinZhanShi_17.adTitle}</h3> 
    <h3 class="subtitle animate__animated animate__fadeInUp zy" data-type="ad" data-id="${roduc_18.adId}">${roduc_18.adTitle}</h3> 
   </div> 
   <div class="swiper-container"> 
    <div class="swiper-wrapper">
     <cms:arts var="cpzsList" code="cpzs" pageNow="0" pageSize="5"></cms:arts>
     <c:forEach items="${cpzsList }" var="zp" varStatus="status" >
      <div class="swiper-slide flex align-center space-center product-item" onclick="window.location.href='${path }/do/redirect/pc/productDetail?id=${zp.artId}'" style="cursor: pointer;">
       <img src="${zp.artImage}" class="img zy">
       <div class="desc flex align-center space-center animate__animated animate__fadeIn zy">
        ${zp.artTitle}
       </div>
      </div>
     </c:forEach>
     </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div> 
   </div> 
  </div> 
  <div class="box news"> 
   <div class="container"> 
    <h3 class="title animate__animated animate__fadeInUp zy" data-type="ad" data-id="${ZY_XinWenZhongXin_27.adId}">${ZY_XinWenZhongXin_27.adTitle}</h3> 
    <h3 class="subtitle animate__animated animate__fadeInUp zy" data-type="ad" data-id="${ews_28.adId}">${ews_28.adTitle}</h3> 
    <div class="news-list">
     <cms:arts var="xwzxList" code="xwzx" pageNow="0" pageSize="2"></cms:arts>
     <c:forEach items="${xwzxList }" var="art" varStatus="status" >
      <div class="item animate__animated animate__fadeInLeft" style="cursor: pointer" onclick="window.location.href='${path }/do/redirect/pc/newsDetail?id=${art.artId}'">
       <img src="${art.artImage}" class="zy">
       <div class="con">
        <div class="flex align-center space-between">
         <h4 class="name zy">${art.artTitle}</h4>
         <h4 class="time zy"><fmt:formatDate pattern="yyyy-MM-dd" value="${art.artCreatetiem}" ></fmt:formatDate></h4>
        </div>
        <p class="desc zy">${art.artAbstract}</p>
       </div>
      </div>
     </c:forEach>
    </div>
   </div> 
  </div> 
  <jsp:include page="_footer.jsp"></jsp:include>  
  <script src="http://hwfile.jyymatrix.cc/jhzht/pc/js/swiper.min.js"></script>
  <script>
        window.onload = function(){
            var swiper = new Swiper('.banner .swiper-container', {
                speed:1000,
                loop:true,
                slidesPerView: 1,
                prevButton:'.banner .swiper-button-prev',
                nextButton:'.banner .swiper-button-next',
                pagination: '.banner .swiper-pagination'
            });
            var swiper = new Swiper('.product .swiper-container', {
                speed:1000,
                loop:true,
                spaceBetween: 30,
                slidesPerView: 4,
                prevButton:'.product .swiper-button-prev',
                nextButton:'.product .swiper-button-next'
            });
            var itemEls = document.getElementsByClassName('product-item');
            for(var i= 0; i < itemEls.length;i++){
                    itemEls[i].onmouseover = function(){
                        var els = this.getElementsByClassName('desc');
                        var imgels = this.getElementsByClassName('img');
                        if(els.length) {
                            els[0].style.display = 'flex'
                        };
                        if(imgels.length){
                            imgels[0].className="img animate__animated animate__pulse"
                        }
                        
                    }
                    itemEls[i].onmouseout = function(){
                        var els = this.getElementsByClassName('desc');
                        var imgels = this.getElementsByClassName('img');
                        if(els.length) {
                            els[0].style.display = 'none'
                        };
                        if(imgels.length){
                            imgels[0].className="img"
                        }
                    }
                }
        }
        
    </script> 
 </body>
</html>